<script setup lang="ts">

import Test2 from "@/views/test2.vue";

import {ref} from 'vue'
import Study_dree from "@/views/study/study_dree.vue";
import Course_list from "@/views/study/course_list.vue";

const input = ref('')

</script>

<template>
  <div class="pt-22 pb-6 bg-white">

    <div class="wty-container">
      <div CLASS=" flex flex-wrap gap-4 mb-6 ">

        <div class="w-[500px]  bg-sky-200 rounded-2xl">
          <div style="text-align: center;margin: 4px 0px">
            《 学科类目 》
          </div>

          <div class="total-container">
            <!-- 已上线元素（3个）- 确保在一行 -->
            <div class="tech-card active" onclick="alert('Python 已上线内容')">
              <div class="tech-icon python">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                  <path
                      d="M15.082 13.421a.5.5 0 0 1-.202.568l-5.678 2.932a.5.5 0 0 1-.746-.434V14.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v3.055a.5.5 0 0 1-.746.434l-5.678-2.932a.5.5 0 0 1-.202-.568l5.678-4.495a.5.5 0 0 1 .746 0l5.678 4.495ZM6.226 6.873a.5.5 0 0 0-.762.015L3.164 10.07l1.908.99a.5.5 0 0 0 .762-.015L8 8.712l1.908 1.357a.5.5 0 0 0 .762-.015l2.392-3.208a.5.5 0 0 0 0-.614l-5.678 4.495a.5.5 0 0 0 0 .614l5.678 4.495a.5.5 0 0 0 .762-.015l2.392-3.208a.5.5 0 0 0 0-.614l-5.678-4.495Z"/>
                </svg>
              </div>
              <div class="tech-info">
                <span class="tech-name">Python</span>
                <span class="tech-desc">数据分析 / AI</span>
              </div>
            </div>

            <div class="tech-card active" onclick="alert('Java 已上线内容')">
              <div class="tech-icon java">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                  <path
                      d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4.12 13.633a.5.5 0 0 0 .956.294l4.12-13.633zM4.152 8.293L8 5.13l3.848 3.163-3.848 3.163L8 11.45l-3.848-3.157z"/>
                </svg>
              </div>
              <div class="tech-info">
                <span class="tech-name">Java</span>
                <span class="tech-desc">后端开发 / 安卓</span>
              </div>
            </div>

            <div class="tech-card active" onclick="alert('MySQL 已上线内容')">
              <div class="tech-icon mysql">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                  <path
                      d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
                </svg>
              </div>
              <div class="tech-info">
                <span class="tech-name">MySQL</span>
                <span class="tech-desc">关系型数据库</span>
              </div>
            </div>

            <!-- 未上线元素 -->
            <div class="tech-card">
              <div class="tech-icon excel">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                  <path
                      d="M2.001 2.001c0 .738.592 1.329 1.329 1.329h.777v7.942h-.777c-.737 0-1.329.591-1.329 1.329v.777h12v-.777c0-.738-.592-1.329-1.329-1.329h-.777v-7.942h.777c.738 0 1.329-.591 1.329-1.329V2h-12v.001zm1.329 1.329v.777h8v-.777c0-.737-.592-1.329-1.329-1.329h-5.342c-.737 0-1.329.592-1.329 1.329zm-1.329 4.665v3h3v-3h-3zm4 0v3h3v-3h-3zm4 0v3h3v-3h-3zM3.33 11.33H6v3H3.33v-3zm4 0h2.67v3H7.33v-3zm4 0h2.67v3h-2.67v3z"/>
                </svg>
              </div>
              <div class="tech-info">
                <span class="tech-name">Excel</span>
                <span class="tech-desc">数据处理 / 表格</span>
              </div>
            </div>

            <div class="tech-card">
              <div class="tech-icon vue">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                  <path
                      d="M8 2.748v1.496c4.12-.914 7.313 3.812 4.258 8.194-4.091 5.094-9.434 1.53-9.434-5.21 0-1.21.253-2.388.748-3.432C5.215 2.36 6.58 1.888 8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                </svg>
              </div>
              <div class="tech-info">
                <span class="tech-name">Vue</span>
                <span class="tech-desc">前端框架</span>
              </div>
            </div>

            <div class="tech-card">
              <div class="tech-icon react">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="white">
                  <path
                      d="M11.5 5.5a.5.5 0 0 1 .136.93l-3.75 2.25a.5.5 0 0 1-.67-.415V5.5a.5.5 0 0 1 1 0v1.765l3.125-1.873a.5.5 0 0 1 .534.085z"/>
                  <path
                      d="M5.5 10.5a.5.5 0 0 1 .136.93l-3.75 2.25a.5.5 0 0 1-.67-.415V10.5a.5.5 0 0 1 1 0v1.765l3.125-1.873a.5.5 0 0 1 .534.085z"/>
                </svg>
              </div>
              <div class="tech-info">
                <span class="tech-name">React</span>
                <span class="tech-desc">前端框架</span>
              </div>
            </div>
          </div>
          <!--          <div class="p-4 flex gap-2 flex-wrap">-->
          <!--            <div class=" w-20 text-center bg-green-300 rounded-md" style="height:40px;line-height: 40px">python</div>-->
          <!--            <div class=" w-20 text-center bg-green-300 rounded-md" style="height:40px;line-height: 40px">java</div>-->
          <!--            <div class=" w-20 text-center bg-green-300 rounded-md" style="height:40px;line-height: 40px">html</div>-->
          <!--            <div class=" w-20 text-center bg-green-300 rounded-md" style="height:40px;line-height: 40px">vue3</div>-->
          <!--          </div>-->
        </div>


        <div class="flex-1 shrink bg-pink-100 rounded-2xl " style="min-width: 300px;">
          <test2/>
        </div>

      </div>


      <hr class="mt-2 mb-2">



      <div class="bg-amber-200 flex gap-2 " style="height: 55px">
        <div class="w-[250px] pl-4" style="background-color: #42b983;line-height: 55px;font-size: 22px">目录</div>
        <div class="flex  flex-wrap justify-between grow bg-sky-300" style="height: 55px">

          <div class="flex gap-2  rounded-md pl-2" style="align-items: center">
            <router-link to="/study/base" class="text-xl nav-link font-medium hover:text-sky-500 transition-colors "  active-class="active-link" >全部课程</router-link>
            <router-link to="/study/advance" class="text-xl  font-medium hover:text-sky-500 transition-colors "  active-class="active-link" >公开课程</router-link>
            <div class="bg-white rounded-md p-[6px]  text-sky-400">全部课程</div>
            <div class="bg-white rounded-md p-[6px]  text-sky-400">公开课程</div>
            <div class="bg-white rounded-md p-[6px]  text-sky-400">专属课程</div>
            <div class="bg-white rounded-md p-[6px]  text-sky-400">vip课程</div>
          </div>

          <div class=" pl-4 pr-10" style="display: flex; align-items: center;">
            <el-input v-model="input" style="width: 240px;height: 42px" placeholder="Please input" class="mr-2"/>
            <el-button type="primary" style="height: 42px" plain>查询</el-button>
          </div>

        </div>
      </div>

      <div class="bg-pink-200 " style="min-height: 500px" >
        <router-view/>
      </div>



    </div>
  </div>


</template>

<style scoped>
.total-container {
  width: 500px;
  height: auto; /* 改为自适应高度，避免内容溢出 */
  min-height: 240px; /* 保留最小高度 */
  border-radius: 10px;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) inset;
}

/* 基础卡片样式 - 确保3个元素能占满一行 */
.tech-card {
  width: calc(33.333% - 6.66px); /* 精确计算宽度，3个刚好一行 */
  height: 50px;
  background: white;
  border-radius: 7px;
  padding: 0 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
  cursor: default;
  border: 1px solid transparent;
}

/* 已上线状态样式 - 不破坏3元素一行的布局 */
.tech-card.active {
  width: calc(33.333% - 6.66px); /* 保持与普通卡片相同宽度，避免错位 */
  height: 52px; /* 仅高度微增，不影响水平布局 */
  background: #f0f7ff;
  border-color: #c9e2ff;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(121, 180, 255, 0.15);
}

.tech-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.07);
}

.tech-icon {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.tech-card.active .tech-icon {
  filter: brightness(0.9);
  box-shadow: 0 0 0 3px rgba(74, 136, 185, 0.15);
}

.tech-icon::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.5s ease;
}

.tech-card:hover .tech-icon::after {
  left: 100%;
}

.tech-icon svg {
  width: 16px;
  height: 16px;
  fill: white;
  z-index: 1;
}

.tech-info {
  display: flex;
  flex-direction: column;
  flex: 1; /* 让文字区域自适应剩余空间 */
}

.tech-name {
  font-size: 14px;
  color: #2d3748;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 防止文字过长溢出 */
}

.tech-card.active .tech-name {
  font-weight: 600;
  color: #1a365d;
}

.tech-desc {
  font-size: 11px;
  color: #718096;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tech-card.active .tech-desc {
  color: #3d4852;
}

/* 学科配色 */
.python {
  background: #4a88b9;
}

.java {
  background: #0086a8;
}

.mysql {
  background: #008ca8;
}

.excel {
  background: #288e51;
}

.vue {
  background: #57c795;
}

.react {
  background: #6cd0f5;
}

.html {
  background: #e34c26;
}

.size-label {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}
</style>